Front-End Fundamentals: A practical guide to front-end web development. by Joe Fender & Carwin Young

Author:Joe Fender & Carwin Young [Fender, Joe]
Language: eng
Format: epub
Published: 2015-02-10T22:00:00+00:00

SCSS syntax

1 #main { 2 background #ffffff; 3 4 article { 5 margin: 0 auto; 6 color: #000000; 7 8 .author { 9 background: #cecece; 10 padding: 10px; 11 } 12 13 } 14 15 }

CSS Output

1 #main { 2 background: #ffffff; 3 } 4 #main article { 5 margin: 0 auto; 6 color: #000000; 7 } 8 #main article .author { 9 background: #cecece; 10 padding: 10px; 11 }

Selecting parents with &

Another handy feature of nesting that Sass provides is a way to reference the parent selector using &. This is particularly handy when you want a nested selector to have a different style when its parent is slightly different, for instance, when the parent has an extra class or state. An easy example of this parent selector usage is styling the various states of a link:

Sass syntax

1 a 2 color: blue 3 4 &:hover 5 color: green 6 7 .some-class & 8 color: purple

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.